<template>
  <view class="alert" catchtouchmove="true" v-if="show">
    <view class='box'>
        <text class='t'>{{vuiData.title}}</text>
        <text class='b'>{{vuiData.content}}</text>
        <button open-type='openSetting' @opensetting="opensetting" plain="false" v-if="scope===1">允许</button>
		<button open-type='getUserInfo' @getuserinfo="getUserInfo" plain="false" v-if="scope===0">允许</button>
	</view>
  </view>
</template>

<script>
	import app from '@/common/index.js'
	export default {
		name: 'vui-scope',
		props: ['vuiData'],
		data() {
			return {
				scope: null,
				show: false,
			};
		},
		computed: {
			has() {
				this.scope = this.vuiData.scope;
				this.show = this.vuiData.isShow;
			}
		},
		methods: {
			opensetting(e) {
				const setInfo = e.detail, auth = setInfo.authSetting;
				if(auth['scope.userLocation']) {
					this.show = false;
					this.$emit('action', false);
				}
			},
			getUserInfo(e) {
				let wxUinfo = e.detail.userInfo;
				if(wxUinfo) {
					app.getUinfo(wxUinfo, (ret) => {
						this.$emit('action', false);
					});
				}
			}
		}
	}
</script>

<style>
/** 授权登录弹窗 */
.alert .box {position: relative; width: 70%; top: 50%; left: 50%; transform: translate(-50%,-50%); border-radius: 3px; text-align: center; background-color: #fff;}
.alert .box text {display: block;}
.alert .box .t {padding: 30upx 0 5upx; font-size: 34upx; color: #333;}
.alert .box .b {padding: 20upx 20upx 30upx; font-size: 28upx; color: #999;}
.alert .box button {border: 0; border-radius: 0; line-height: 70upx; color: #16d411; background-color: #f6f7f8;}
</style>
